<template>
  <div class="header">
    <h2>{{ title }}</h2>
    <slot />
    <div v-if="hasFilter" class="filters">
      <p v-for="(item, index) in filterItems" :key="index" :class="{'on': currentIndex === index}" class="filter" @click="filte(item,index)">{{ item.label }}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Header',
  props: {
    title: {
      type: String,
      required: true
    },
    hasFilter: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currentIndex: 0,
      filterItems: [
        {
          label: '近7日',
          value: 7
        },
        {
          label: '近30日',
          value: 30
        },
        {
          label: '近1年',
          value: 365
        }
      ]
    };
  },
  created() {
  },
  methods: {
    filte(item, i) {
      this.currentIndex = i;
      this.$emit('filte', item);
    }
  }
};
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';
$height: 55px;
.header{
	width: 100%;
	overflow: hidden;
	height: $height;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	padding: 0 40px 0 30px;
	box-sizing: border-box;
	border-bottom: 1px solid $borderColor;
	h2{
		margin: 0;
		padding: 0;
		font-size: $fontSizeLg;
		color: #000;
		font-weight: bolder
	}
	.filters{
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: flex-end;
		.filter{
			font-size: $fontSizeBase;
			color: $textColorDark;
			margin-left: 40px;
			cursor: pointer;
			&:first-child{
				margin-left: 0;
			}
			&.on{
				color: $mainColor;
			}
		}
	}
}

</style>
